<template>
    <div style='background: #f7f7f7' class="repayment">
        <div class='title'>
            <img @click='$router.back()' src="../icon/fanhui.png" alt="">
            <span>还款计划查询</span>
        </div>
        <div class='Idnumber'>
            <div class='Idcard'>
                <span>身份证:</span>
                <input type="text" v-model='id_card' ref='inputID' @onblur="isCardNo()">
            </div>
            <span class="tip">{{tip}}</span>
            <div class='Idbtn' @click='getrepaymentlpan()'>查询还款计划</div>
        </div>
        <div style='width: 100%;height: 0.3rem;background: #f7f7f7'></div>
        <div v-if="repaymentplan.status">
            <div class='periods' v-for='(list,index) in repaymentplan.msg'>
                <!-- <p style='color:#518CF2;font-size: 0.3rem'>第{{list.period}}期</p> -->
                <p style='color:#518CF2;font-size: 0.3rem'>查询结果</p>
                <p>
                    <span>客户姓名: <span>{{list.customerName}}</span></span>
                    <span>还款账号: <span>{{list.replaceAccount}}</span></span>
                </p>
                <p>
                    <span>应还金额: <span>{{list.payPrincipalAmt}}元</span></span>
                    <span>应还日期: 
                        <span v-if="list.paydate!=''">{{list.paydate}}
                        </span>
                        <span v-else>{{list.nextPaydate}}
                        </span>
                    </span>
                </p>
                <p>
                    <span>实还金额: <span>{{list.actualPayprincipalAmt}}元</span></span>
                    <span>滞纳金: <span>{{list.lateFee}}元</span></span>
                </p>
                <p>
                    <span>逾期天数: <span>{{list.overDueDays}}天</span></span>
                </p>
                <div class='line'></div>
            </div>
        </div>
        <div class='periods' v-else>
            <p><span>{{repaymentplan.msg}}</span></p>
        </div>
    </div>
</template>
<style>
.repayment .Idnumber .tip{
    display: block;
    margin-top: -0.6em;
    margin-bottom: 0.6em;
    margin-left: 20%;
    font-size: 12px;
    color: red;
}
</style>

<script>
    import axios from "axios"
    import Config from '../api/config'
    import {mapState} from 'vuex'
    export default{
        data(){
            return{
                id_card:'',
                tip:null
            }
        },
        created(){
            this.initrepaymentlpan();
        },
        mounted(){

        },
        methods:{
            //获取还款计划列表
            getrepaymentlpan(){
                this.$store.dispatch({type:'getRepayment',id_card:this.id_card});
            },
            //首次进入查询页面显示空
            initrepaymentlpan(){
                this.$store.dispatch({type:'initrepayment',id_card:111});
            },
            isCardNo(){
                var value = this.$refs.inputID.value  
                // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X  
                var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;  
                if(reg.test(value) === false) {
                    return  this.tip = "请输入正确的身份证号"
                } else {
                    return  this.tip = null;
                }
            }  
        },
        computed: {
            ...mapState({
                repaymentplan: state => state.mine.repaymentplan,
                initrepayment: state => state.mine.initrepayment,
            })
        },
        watch: {
            id_card:function(id_card){
                this.isCardNo(id_card)
            }
        }
    }
</script>
